<template>
    <div id="backg">
        <div class="questions-box">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <template v-for="(item,index) in questions_list" :key="index">
                    <label for>{{ index + 1 }}</label>
                    {{ item.question_desc }}
                    <br />
                    <van-radio-group v-model="item.answer">
                        <van-cell-group>
                            <template v-for="(val,i) in item.choice_info" >
                                <van-cell
                                    v-bind:title="val.title + ' ' + val.content"
                                    clickable
                                    @click="item.answer = val.title"
                                    style="font-size:18px"
                                >
                                    <template #right-icon>
                                        <van-radio v-bind:name="val.title" />
                                    </template>
                                </van-cell>
                            </template>
                        </van-cell-group>
                    </van-radio-group>
                </template>
            </van-list>
        </div>
        <div class="questions-button-box">
            <van-button type="primary" @click="submit">提&nbsp;交</van-button>
        </div>
        <div style="width:300px;margin:0 auto; padding:20px 0;">
          <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=13020302001048" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
            <img src="../assets/countryicon.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">冀公网安备 13020302001048号</p >
          </a >
        </div>
        <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" style="display:inline-block;height:20px;line-height:20px;margin: 0px 0px 60px 5px; color:#939393;">冀ICP备2021009292号-2</a>
    </div>
</template>
<script>
import axios from "axios";
const queryData = (params) => {
    return axios.post(`/api/question/info/list`, { question_set_id: 1, ...params });
};
const addData = (params) => {
    const answerArr = [];
    params.forEach(item => {
        answerArr.push({
            question_id: item.question_id,
            answer: item.answer
        });
    })
    return axios.post("/api/question/answer/submit", { uid: window.localStorage.getItem('uid'), question_set_id: 1, answer_info: answerArr,submit_type:1 });
};
export default {
    data() {
        return {
            questions_list: [],
            loading: false,
            finished: false,
            page_no: 0,
            total: 0,
        }
    },
    created() {
        // search({
        //     page_no: 1,
        //     page_size: 10,
        // });
        // queryData({
        //     page_no: 1,
        //     page_size: 10,
        // }).then((response) => {
        //     // 加载状态结束
        //     this.loading = false;
        //     this.questions_list = response.data.data.list;
        //     this.questions_list.forEach(item => {
        //         item.answer = '';
        //     });
        // });
    },
    methods: {
        onLoad() {
            if (!this.loading) {
                this.search();
            }
        },
        search() {
            this.loading = true;
            this.page_no++;
            queryData({
                page_no: this.page_no,
                page_size: 6,
            }).then((response) => {
                // 加载状态结束
                this.loading = false;
                this.total = response.data.data.total_num;
                if (this.questions_list.length <= response.data.data.total_num) {
                    response.data.data.list.forEach(item => {
                        item.answer = '';
                        this.questions_list.push(item);
                    });
                }
                if (response.data.data.total_num <= this.questions_list.length) {
                    this.finished = true;
                }
            });
        },
        submit() {
            if (this.total > this.questions_list.length) {
                this.$notify({ type: 'warning', message: '请上拉加载所有题目，回答完所有题目再提交.' });
                return;
            }
            let error = '';
            this.questions_list.forEach((item, index) => {
                if (!item.answer) {
                    error += ((index + 1) + ';');
                }
            });
            if (error) {
                this.$notify({ type: 'warning', message: '请回答完题目再提交，未回答题目：' + error });
                return;
            }
            addData(this.questions_list).then((data) => {
                if (data && data.data && data.data.meta.ecode === 0) {
                    this.$notify({ type: 'success', message: '提交成功' });
                    // 刷新数据
                    this.$router.push({name:'point',params:{point:data.data.data.point,answerlist:data.data.data.error_questions}});
                } else {
                    this.$notify({ type: 'warning', message: "新增提交失败" + ((data?.data?.meta?.emsg) ? ('：' + data?.data?.data?.emsg) : '') });
                }
            });
        }
    }
}
</script>
<style>
#backg{
  background: url(./../assets/bg.png);
  background-size: 100% 100%;
 height: 100%;
position: fixed;
 width: 100%;
  overflow: auto;
}
.questions-box {
    font-size: 18px;
    margin: 0 16px 40px 16px;
    text-align: left;
    padding-top: 16px;
}
.questions-box ul li {
    margin: 15px;
}
.questions-button-box {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: transparent;
}
.questions-button-box button {
    padding: 16px 48px;
}
</style>